<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/singlePage.css" />
		<link rel="stylesheet" type="text/css" href="../css/payment.css" />
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="payment" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
					<div id="inputArea" class="mui-popover mui-popover-action">
						<table class="keyboard" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td class="keyboard-number mui-table-view-cell">1</td>
									<td class="keyboard-number mui-table-view-cell">2</td>
									<td class="keyboard-number mui-table-view-cell">3</td>
								</tr>
								<tr>
									<td class="keyboard-number mui-table-view-cell">4</td>
									<td class="keyboard-number mui-table-view-cell">5</td>
									<td class="keyboard-number mui-table-view-cell">6</td>
								</tr>
								<tr>
									<td class="keyboard-number mui-table-view-cell">7</td>
									<td class="keyboard-number mui-table-view-cell">8</td>
									<td class="keyboard-number mui-table-view-cell">9</td>
								</tr>
								<tr>
									<td class="reset iconfont mui-table-view-cell">&#xe603;</td>
									<td class="keyboard-number mui-table-view-cell">0</td>
									<td class="cancel iconfont mui-table-view-cell">&#xe61d;</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="main" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">支付密码</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<h5 class="min-title">设置密码</h5>
				<ul class="mui-table-view" id="setlist">
					<li class="mui-table-view-cell bytel">
						<a class="mui-navigate-right" href="#tel">
							通过手机号码设置
						</a>
					</li>
				</ul>
				<h5 class="min-title">重置密码</h5>
				<ul class="mui-table-view" id="resetlist">
					<li class="mui-table-view-cell bypwd">
						<a class="mui-navigate-right" href="#old_pwd">
							使用原密码重置
						</a>
					</li>
					<li class="mui-table-view-cell bytel">
						<a class="mui-navigate-right" href="#tel">
							通过手机号码重置
						</a>
					</li>
				</ul>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="old_pwd" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">验证原密码</h1>
			</div>
			<div class="mui-page-content">
				<table class="number_input" id="old_pwd_area">
					<tr>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
					</tr>
				</table>
				<button class="mui-btn btn-main btn-block">确认</button>
			</div>
		</div>
		<div id="tel" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">验证手机号码</h1>
			</div>
			<div class="mui-page-content">
				<p>点击获取验证码后，我们将向您当前账号绑定的手机号码发送一条验证码</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<i class="iconfont">&#xe60c;</i>
						<input id='checkNum' type="number" class="mui-input" placeholder="请输入验证码" maxlength="6">
						<button id='checkP' type="button" class="mui-btn-red send">获取验证码</button>
					</div>
				</form>
				<p id="teltoast">
					我们已向您号码为<span></span>的手机发送一条验证码，请注意查收<br />
					验证码两分钟内输入有效
				</p>
				<button class="mui-btn btn-main btn-block">确认</button>
			</div>
		</div>
		<div id="new_pwd" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">新密码</h1>
			</div>
			<div class="mui-page-content">
				<table class="number_input" id="new_pwd_area">
					<tr>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
					</tr>
				</table>
				<button class="mui-btn btn-main btn-block">确认</button>
			</div>
		</div>

		<div id="new_pwd2" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">重新输入新密码</h1>
			</div>
			<div class="mui-page-content">
				<table class="number_input" id="new_pwd_area2">
					<tr>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
					</tr>
				</table>
				<button class="mui-btn btn-main btn-block">确认</button>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js "></script>
	<script src="../js/mui.view.js "></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#payment').view({
			defaultPage: '#main'
		});

		mui.plusReady(function() {
			var lockstate = plus.webview.currentWebview().psw;
			console.log('state' + lockstate);
			var view = viewApi.view;
			//处理view的后退与webview后退
			var oldBack = mui.back;
			mui.back = function() {
				mui('#inputArea').popover('hide');
				plus.nativeUI.confirm("您尚未完成操作，是否返回？", function(e) {
					if(!e.index) {
						oldBack();
					}
				}, '', ["确定", "取消"]);
			};

			var $currentPage, $currentInputRow; // 当前正在展示的页面、输入框
			var inputarr = [],
				inputarr2 = [],
				oldpwdarr = [];
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				// 更新当前正在展示的页面、输入框
				$currentPage = $("#" + e.detail.page.id);
				if(/^(old_pwd|new_pwd)$/.test(e.detail.page.id)) {
					setTimeout(function() {
						mui('#inputArea').popover('show');
					}, 100);
				}
				$currentInputRow = $(".number_input", $currentPage);
				inputarr = [];
				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				console.log(e.detail.page.id + ' back');
			});
			
			// 未设置支付密码则不能重置
			mui('ul#resetlist').on('tap', 'li.mui-table-view-cell', function() {
				if(!lockstate) {
					mui.toast('您尚未设置支付密码，无法重置');
					return false;
				}
			})
			
			var changeway; // 修改密码方式 1：通过原密码 2：通过手机号
			
			// 当前修改密码的方式
			mui('.mui-page#main').on('tap', 'li.mui-table-view-cell', function() {
				changeway = $(this).hasClass('bypwd') ? 1 : 2;
			})
			
			// 键盘输入
			mui('#inputArea').on('tap', 'td', function() { 
				if($(this).hasClass('keyboard-number')) { // 输入数字
					if(inputarr.length == 6) {
						return;
					}
					inputarr.push($(this).text());
					$currentInputRow.find('.iconfont:hidden:first').show();
				} else {
					if($(this).hasClass('reset')) { // 重新输入
						inputarr = [];
						$currentInputRow.find('.iconfont').hide();
					} else { // 退格
						inputarr.pop();
						$currentInputRow.find('.iconfont:visible:last').hide();
					}
				}
				console.log(inputarr.join(''));
			})
			
			// 点击数字输入区域展开键盘
			mui('.mui-page-content').on('tap', '.number_input', function() { 
				mui('#inputArea').popover('show');
				event.stopPropagation();
			})
			
			// 点击空白处展开、收起键盘
			mui('.mui-page#old_pwd,.mui-page#new_pwd,.mui-page#new_pwd2').on('tap', '.mui-page-content', function() { 
				mui('#inputArea').popover('hide');
				event.stopPropagation();
			})
			
			// 验证原支付密码
			mui('.mui-page#old_pwd').on('tap', 'button', function() { 
				event.stopPropagation();
				if($currentInputRow.find('.iconfont:last').is(':hidden')) {
					return false;
				}
				console.log('原支付密码：' + inputarr.join(''));
				var url = baseURL + 'account/checkPassWord.json?password=' + inputarr.join('');
				console.log(url);
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1) {
						oldpwdarr = inputarr;
						inputarr = [];
						viewApi.go("#new_pwd");
					} else if(data.code == -2) {
						mui.toast('支付密码输入错误，请重新输入');
						$currentInputRow.find('.iconfont').hide();
						inputarr = [];
					} else {
						mui.toast('请求失败，请稍后重试');
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			})
			
			// 重新输入新密码
			mui('.mui-page#new_pwd').on('tap', 'button', function() { 
				event.stopPropagation();
				if($currentInputRow.find('.iconfont:last').is(':hidden')) {
					return false;
				}
				console.log('新支付密码：' + inputarr.join(''));
				inputarr2 = inputarr;
				viewApi.go("#new_pwd2");
			})
			
			// 验证新密码
			mui('.mui-page#new_pwd2').on('tap', 'button', function() { 
				event.stopPropagation();
				mui('#inputArea').popover('hide');
				if($currentInputRow.find('.iconfont:last').is(':hidden')) {
					return false;
				}
				console.log('第一次输入' + inputarr2.join('') + '第二次输入：' + inputarr.join(''));
				if(!(inputarr2.join('') == inputarr.join(''))) { // 两次输入不一致
					plus.nativeUI.confirm("两次输入的密码不一致，是否返回上一页面？", function(e) {
						if(!e.index) {
							inputarr = inputarr2 = [];
							$("#new_pwd_area,#new_pwd_area2").find('i.iconfont').hide();
							viewApi.back();
						} else {
							$currentInputRow.find('.iconfont').hide();
							inputarr = [];
						}
					}, '', ["确定", "取消"]);
				} else { // 两次输入一致
					if(changeway == 1) {
						var url = baseURL + 'account/updatePassWord.json?password=' + inputarr.join('') + '&oldpd=' + oldpwdarr.join('');
						console.log('使用原密码修改');
					} else {
						var url = baseURL + 'account/updatePassWordByMobil.json?password=' + inputarr.join('');
						console.log('使用手机号码修改');
					}
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							oldBack();
							mui.toast('修改成功');
						} else {
							oldBack();
							mui.toast('修改失败，请重试');
						}
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				}
			})

			var interTime = 60;
			var timer;
			var timeout = false;
			var checkNum = document.getElementById("checkNum"); // 验证码输入框
			var checkP = document.getElementById("checkP"); // 获取验证码按钮

			// 点击获取验证码
			mui('.mui-input-row').on('tap', '#checkP', function() { 
				timeout = false;
				var toastP = document.getElementById("teltoast");
				checkP.disabled = "disabled";
				timer = setInterval(drawClock, 1000); //设置定时器，让时钟运转起来
				Common.ajax({
					url : baseURL + 'getCheckCode.json'
				}, function(data) {
					if(data.code == 1) {
						console.log(JSON.stringify(data));
						// 提示接受验证码的手机号码
						$(toastP).show().find('span').text(data.mobile);
					} else {
						mui.toast('验证码请求失败，请稍后重试');
						clearInterval(timer);
						checkP.disabled = "";
						checkP.innerHTML = "获取验证码";
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					clearInterval(timer);
					checkP.disabled = "";
					checkP.innerHTML = "获取验证码";
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			})
			
			// 验证验证码
			mui('.mui-page#tel').on('tap', 'button', function() { 
				if(!timeout) {
					if(!/^\d{6}$/.test(checkNum.value)) {
						mui.toast('验证码格式不正确，请重新输入');
						checkNum.value = '';
						checkNum.focus();
					} else {
						console.log('验证码' + checkNum.value);
						var url = baseURL + 'verifyCheckCode/' + checkNum.value + '.json';
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								checkNum.blur();
								viewApi.go("#new_pwd");
							} else {
								mui.toast('验证码不正确，请重新输入');
								checkNum.value = '';
								checkNum.focus();
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						});
						checkNum.blur();
						viewApi.go("#new_pwd");
					}
				} else {
					mui.toast('验证码已失效，请重新获取');
				}
			})
			
			// 验证码计时器
			function drawClock() {
				if(interTime == 0) {
					clearInterval(timer);
					checkP.disabled = "";
					checkP.innerHTML = "获取验证码";
					timeout = true;
				} else {
					interTime--;
					checkP.innerHTML = interTime + "秒";
				}
			}
		})
	</script>

</html>